<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>专家推荐方案</title>
	<meta name="decorator" content="custom"/>
	<script src="${ctxStatic}/common/expertExperienceResult.js" type="text/javascript"></script>
	<script src="${ctxStatic}/jquery/jsrender.min.js" type="text/javascript"></script>
	<style type="text/css">
	  	 html, body {overflow-y:auto;}
	  	 	/* table css*/
	  	table {
	  		border: 0px solid #969696 !important;background-color: #fff;
	  	}
		td{text-align: left !important;}
	 	table tr{
 			height:40px;
 	 	}
	 	table tbody tr:nth-child(odd) td,
		table tbody tr:nth-child(odd) th {
		    background-color: #fff; /* non-RGBA fallback  */
		    background-color: rgba(255,255,255,.05);
		}
		.ui-checkbox .ui-checkbox-on:after{background-color:#C52620;
		}
		.ui-checkbox .ui-btn:hover{background-color:#cc9900;color:#fff;
		}
		.buttons{
			width:100%;text-align:center;
		}
		.buttons .ui-btn{
			width:42%;		
		}
		 .btn{width:130px;}
		 h4{
			 margin-left:10px;
		 }
		 p{
			 line-height:20px;margin-left:3px;font-size:16px;font-weight:bold;
		 }
	 	.main{width:96%;margin: auto;}
	 	.main h3{
	 	 	text-align: center;font-size:22px;
	 	}
	 	.main h3 span{
	 	 	float:center;
	 	}
	 	#searchForm{
	 		font-size:18px;line-height:30px;
	 		margin-bottom:5px;width:100%;border: 1px solid #ddd;
	 	}
	 	#searchForm tr .subtd{
	 		font-weight:normal;color:#CD6600;padding-left:28px;background-color: #fff;
	 	}
	 	#searchForm tr td{
	 		border-top: 1px solid #ddd;
	 	}
	 	#searchForm tr .hongxin{
			width:24px;height:24px;
			background:url(${ctxStatic}/images/hongxin.png) no-repeat left;
			padding-left:28px;
		}
		#searchForm table tr td{
				border-top: 0px solid #ddd;
		}
	 	.solutionTable{
	 		width:100%;margin:auto;clear:both;background-color:#F5FFFA;
	 	}
	 	.solutionTable tr td {
	 		vertical-align: top;
	 	}
	 	.solutionTable .solutionUsage {
	 		background-color:#C52620;color:#fff;
	 	}
	 	.solutionTable .product-table{width:100%;height: 40px;background-color:#F5FFFA;}
	 	.solutionTable .product-table .stepTitle{
	 		text-align:center;
	 	}
	 	.solutionTable .product-table td{ 
	 		width:50%;vertical-align: top !important;
	 	}
	 	.solutionTable .product-table tr td:first-child{ 
	 		border-right:1px solid #ddd;
	 	}
	 	.solutionTable .product-table tr{ 
	 		border-top:1px solid #ddd;height:0px;
	 	}
	 	.solutionTable .product-table tr:first-child{ 
	 		border-top:0px;height:40px;line-height:40px;
	 	}
	 	.solutionTable .mixtitle{
	 		height:32px;font-size:20px;font-weight:bold;line-height:32px; text-align:center;
	 	}
	 	.solutionTable .product{
	 	 	font-size:16px;font-weight:bold;width:100%;
	 	}
	 	.solutionTable .food{
	 		text-align: left!important;
	 	 	font-size:16px;font-weight:bold;
	 	}
	 	.solutionTable .care{
	 	 	font-size:16px;font-weight:bold;
	 	}
	 	.solutionTable .stepTitle{
	 		padding-left:30px;font-size:20px;text-align:left;
	 	}
	 	.solutionTable .product .title{
	 	 	height:32px;font-size:18px;line-height:32px;
	 	}
	 	.solutionTable .item{
	 	 	margin-top:20px;margin:auto;
	 	}
	 	.solutionTable .product .item{
	 	 	float:left;min-height:100px;border: 1px solid #ddd;
	 	 	width:240px;
	 		clear:both;margin-bottom:10px;margin-left:50px;
	 	}
	 	.solutionTable .product .item .left{
	 	 	width:135px;float:left;
	 	}
	 	.solutionTable .product .item .right{
	 	 	width:100px;height:110px;float:left;
	 	}
	 	.solutionTable .product .ui-checkbox label.ui-checkbox-off{
	 		background:#e5e5e5;color:black;
	 	}
	 	.solutionTable .food .item{
	 	 	display:inline-block;margin:10px 10px 10px 25px;width:220px;font-size:18px;
	 		border: 1px solid #ddd;box-shadow: 1 1 1  rgba(0,0,0,.2);
	 		-webkit-border-radius: .3125em /*{global-radii-buttons}*/;
			border-radius: .3125em /*{global-radii-buttons}*/;
			background:#F5FFFA;
	 	}
	 	.solutionTable .food .item .top,.solutionTable .food .item .bottom{
		 	 padding:0px;border: 0;background:#F5FFFA;
	 	}
	 	.solutionTable .food .item .ui-checkbox{
	 		margin:0px;height:64px;
	 	}
	 	.solutionTable .food .item .ui-checkbox label{
	 		height:40px;
	 	}
	 	.solutionTable .food .item .bottom .noimg{
		 	width:100%;
	 	}
	 	.solutionTable .food img{
		 	max-width:150px;
	 	}
	 	.solutionTable .care .item{
	 	 	display:inline-block;margin:10px 0px 10px 25px;min-height:50px;width:400px;font-size:18px;line-height:32px;
	 		background:#F5FFFA;border: 1px solid #ddd;box-shadow: 1 1 1  rgba(0,0,0,.2);
	 	}
	 	.solutionTable .care .item .ui-checkbox{
	 		display:inline-block;width:53px; height:50px;background:#F5FFFA;border: 0px solid #ddd;
	 	}
	 	.solutionTable .care .item .ui-checkbox label{
	 		background:#F5FFFA;border: 0px solid #ddd;
	 	}
	 	.solutionTable .care .item button{
	 		width:330px;text-align:left;color:#000;margin-top:0px;margin-left:-5px;background:#F5FFFA;border: 0px solid #ddd;
	 		box-shadow: 0 0 0  rgba(0,0,0,.2);
	 	}
	 	#tabs{
	 		border:1px solid #e5e5e5; background-color:#F5FFFA ;border: 1px solid #ddd;
	 	}
	 	#navbars{
	 		border: 1px solid #ddd;
	 		height: 80px;
			-webkit-border-radius: .3125em /*{global-radii-buttons}*/;
			border-radius: .3125em /*{global-radii-buttons}*/;
	 		overflow-x: auto;
	 	}
	 	#navbars .icon-left{
	 		background:url(${ctxStatic}/images/controls.png) no-repeat 0 -32px;
	 		width: 30px;
			height: 45px;
			background-color: transparent;
			position: absolute;
			left: 0px;
			top: 10px;
			z-index:100;
			display:none;
	 	}
	 	#navbars .icon-right{
	 		background:url(${ctxStatic}/images/controls.png) no-repeat -43px -32px;
	 		width: 30px;
			height: 45px;
			background-color: transparent;
			position: absolute;
			left:96%;
			top: 10px;
			z-index:100;
			display:none;
	 	}
	 	#navbars ul{
	 		min-width: 2000px;
	 		height: 100%;
	 	}
	 	#navbars ul li{
	 		width:200px;margin:0px;float:left;	 		
	 	}
	 	#navbars li a{
	 		-webkit-border-radius: .3125em /*{global-radii-buttons}*/;
			border-radius: .3125em /*{global-radii-buttons}*/;
	 	 	background:#ddd;color:#000;border:1px solid #F5FFFA;font-size:18px;padding:0;
	 	}
	 	#navbars li a.ui-btn-active{
	 		background:#cc9900;color:#fff;text-shadow: 0  0 0 /*{a-active-shadow-radius}*/ #0a0a0b;
	 	}
	 	#navbars .ui-checkbox{
	 		display:inline-block;background:transparent;border: 0px solid #ddd;
	 		margin: 0;float:left;
	 	}
	 	#navbars .ui-checkbox label{
	 		width:5px;height:43px;background:transparent;border: 0px solid #ddd;font-size: 6px;
	 	}
	 	#navbars .ui-checkbox input{
	 		display:none;
	 	}
	 	#navbars font {
	 		display: inline-block;
	 		text-align:left;padding-left:25px;
			line-height: 60px;text-overflow : ellipsis;overflow:hidden;
			vertical-align: middle;	width:150px;white-space:nowrap;
	 		margin-top:-1px;height:60px;margin-left:-30px;font-size:18px;
	 	}
	 	.solutionTable img{
	 		max-width:100px;max-height:100px;margin:auto;
	 	}
	 	.solutionTable .noimg{
	 		width:100px;height:100px;margin-top:3px;
	 		text-align:center;line-height:100px;
	 	}
	 	.hiddenTab {
	 		display:none;
	 	}
	 	.showTab-button{
	 		font-size:24px;line-height:30px;
	 	}
	 	.hiddenTab-button{
	 		font-size:24px;line-height:30px;
	 	}
	 	#sureDetail {
	 		margin-top:30px;
	 		width:100%;
	 	}
	 	#sureDetail table{width:100%;
	 	}
	 	#sureDetail .title{
	 		text-align:center;font-size:26px;color:#08c;
	 	}
	 	#sureDetail .result{
	 		margin-top:150px;
	 		text-align:center;font-size:20px;
	 	}
	 	.solutionTable .ui-collapsible-heading-toggle, .solutionTable .ui-collapsible-heading-toggle:hover{
		 	background: #fff /*{a-bup-background-color}*/;
			border-color: #777b12 /*{a-bup-border}*/;
			color: red /*{a-bup-color}*/;
	 	}
	 </style>
	
	<script type="text/javascript">
		var jsonData = ${jsonData};
		var ctx = '${ctx}';
		var onimg = '${ctxStatic}/images/noimg.png';
		var scrollToId = "";
		$(document).ready(function() {
			resultInit('${ctx}');
			$("#sureDetail").validate({
				submitHandler: function(form){
					var data = getResultJsonData();
					$("#jsonData").val(JSON.stringify(data));
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
			//设定产品明细页面高度
			$("#datailFrame").height($(window).height()-5);
		});
	</script>
</head>
<body>
<jsp:include page="expertTemplate.jsp" flush="true"/> 
<div id="resultPanel">
	<div class="main">
	<div class="icon-buttons">
		<a onclick="location.href='${ctx}/expert/customerExam/resultList'" data-icon="back" data-iconpos="notext" data-role="button" data-inline="true">返回</a>
		<input id="btnSubmit" onclick="makeSure()" data-icon="check" data-iconpos="notext" type="submit" value="保 存" data-inline="true"/>
	</div>
	<table id="searchForm">
		<tr><td class="hongxin">亲爱的克缇佳人${customer}，经过博通克缇专家对您肤质的精确检测，专属于您的诊断方案如下：</td></tr>
		<tr><td class="hongxin">您的肤况、体况、习惯如下：</td></tr>
		<tr><td class="subtd">
			<c:forEach items="${parameterList}" var="name" varStatus="idxStatus">
				<c:if test="${idxStatus.index != 0}">
					&nbsp;~&nbsp;
				</c:if>
				【${name}】
			</c:forEach>
		</td></tr>
		<tr><td class="hongxin">博通克缇专家诊断您的皮肤，现阶段属于</td></tr>
		<tr><td class="subtd">
			<c:forEach items="${solutionNameList}" var="name" varStatus="idxStatus">
				<c:if test="${idxStatus.index != 0}">
					&nbsp;~&nbsp;
				</c:if>
				【${name}】
			</c:forEach>
		</td></tr>
		<tr><td class="hongxin">要修复改善您的肤质问题，使其健康、美丽，博通克缇专家为您量身推荐以下皮肤护理保养品：</td></tr>
		<tr><td id="productList" class="subtd"></td></tr>
		<tr><td class="hongxin">博通克缇专家推荐健康食品如下：</td></tr>
		<tr><td id="foodList" class="subtd"></td></tr>
		<tr><td class="hongxin">博通克缇专家推荐店面深度护理方案如下：</td></tr>
		<tr><td id="careList" class="subtd"></td></tr>
		<tr><td class="hongxin">请您按照皮肤生理优先准则安排您的护理次序：</td></tr>
		<tr><td class="subtd">
			<c:forEach items="${solutionPriority}" var="map">
				${map.key}:${map.value}&nbsp;&nbsp;
			</c:forEach>
		</td></tr>
		<tr><td class="hongxin">下面是每一种专家方案的具体明细，让我们一起来确认吧！<font style="color:red;float:right;">带(*)为必选项</font></td></tr>
	</table>	
	<div data-role="tabs" id="tabs">
		<div data-role="navbar" id="navbars">
			<div class="icon-left">&nbsp;</div>
		    <ul>
		      <li></li>
		    </ul>
		     <div class="icon-right">&nbsp;</div>
	    </div>
  	</div>
  </div>
 </div>
 <div id="detailPanel" style="display:none;width:100%;height: 100%;">
 	<div class="icon-buttons">
		<a onclick="returnResult('detailPanel')" data-icon="back" data-iconpos="notext" data-role="button" data-inline="true">返回</a>
	</div>
	<iframe id="datailFrame" name="datailFrame" src="about:blank"
		scrolling="yes" frameborder="no" width="100%">
	</iframe>
 </div>
 <div id="surePanel" style="display:none;width:70%;margin:auto;heigth:100%;overflow:visible;">
 	<div class="icon-buttons">
		<a onclick="returnResult('surePanel')" data-icon="back" data-iconpos="notext" data-role="button" data-inline="true">返回</a>
	</div>
 	<form id="sureDetail" action="${ctx}/expert/customerSolution/save" method="post">
 		<input type="hidden" name="jsonData" id="jsonData">
 		<input id="exam_id" name="exam_id" type="hidden" value="${exam_id}"/>
 		<div>
 		</div>
 	</form>
 </div> 
</body>
</html>
